<template>
  <div class="container">
    <div style="display: flex;margin-top: 30px;">
      <div class="divider"></div>
      <div class="announcement-title">系统公告</div>
    </div>
    <div class="card">
      <transition name="slide-fade">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item :name="index" v-for="(item,index) in noticeList" :key="item.id">
            <template #title>
              <i class="header-icon el-icon-info"></i>
              <strong>{{ item.title }}</strong>
              <span class="time">{{ item.time }}</span>
            </template>
            <div v-html="item.content"></div>
          </el-collapse-item>
        </el-collapse>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontNotice",
  data() {
    return {
      noticeList: [],
      activeName: 0
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.$request.get("/notice/selectAll").then(res => {
        this.noticeList = res.data || [];
      });
    }
  }
};
</script>

<style scoped>
.container {
  flex-direction: column;
  align-items: center;
  width: 50%;
  margin: 10px auto;
}

.divider {
  background-color: #2656b5;
  width: 10px;
  height: 50px;
  margin: auto 10px;
  border-radius: 10px;
}

.announcement-title {
  font-size: 30px;
  font-weight: bold;
  margin: auto 10px;
  padding: 10px 0px;
  color: #333;
  text-align: left;
}

.card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px 0;
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

.time {
  margin-left: 20px;
  font-size: 11px;
}

/* 过渡动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

.el-collapse-item__wrap,
.el-collapse-item__content {
  width: 100%;
  overflow: hidden;
}
</style>
